<script setup>
import { ref, watch, inject, computed } from 'vue'

// deep 在vue3中不生效
defineOptions({
  options: { styleIsolation: 'shared' },
})

const props = defineProps({
  // 显示、隐藏
  show: {
    type: Boolean,
    default: false,
  },
  // 显示关闭按钮
  showClose: {
    type: Boolean,
    default: false,
  },
  // 类型-0.播放列表---1.喜欢列表
  type: {
    type: Number,
    default: 0,
  },
  // 列表数据
  list: {
    type: Array,
    default: () => [],
  },
  // 当前播放歌曲信息
  playerInfo: {
    type: Object,
    default: () => ({}),
  },
  // 标题
  title: {
    type: String,
    default: '播放队列',
  },
  // 标题文本位置
  titleAlign: {
    type: String,
    default: 'left',
  },
  // 主题色
  theme: {
    type: String,
    default: '#465cff',
  },
})

// 自定义事件
const emit = defineEmits(['click', 'del', 'clear', 'close'])

// 获取App 组件传递的数据和方法
const { updateModal } = inject('common', null)

// 显示弹窗
const showPopup = ref(props.show)
const typeTitle = computed(() => props.title.slice(0, 2))
// 没有数据显示
const emptyMode = computed(() => {
  return props.title.indexOf('播放') > -1 ? 'list' : 'data'
})

watch(
  () => props.show,
  (newVal) => {
    showPopup.value = newVal
  }
)

// 删除歌曲
const changeDelSong = (song) => {
  // 设置模态框状态
  updateModal({
    status: {
      mode: 1,
      type: props.type,
      showModal: true,
      confirmText: '删除',
      modalTitle: `是否删除歌曲?`,
      content: `《${song.name}》`,
      id: song.id,
    },
    confirm: () => {
      emit('del', song.id, props.type)
    },
  })
}

// 清空列表
const changeClearList = () => {
  if (props.list.length <= 0) return uni.$u.toast('已没有数据~')
  // 设置模态框状态
  updateModal({
    status: {
      mode: 0,
      type: props.type,
      showModal: true,
      confirmText: '清空',
      modalTitle: `清空${props.title}?`,
      content: `${props.list.length} 首歌曲`,
    },
    confirm: () => {
      emit('clear', props.type)
    },
  })
}
</script>

<template>
  <u-popup
    v-model="showPopup"
    mode="bottom"
    border-radius="24"
    @close="$emit('close')"
  >
    <view class="scroll-wrap">
      <view class="scroll-header u-border-bottom">
        <view
          class="u-icon--close"
          @click="closePopup"
          v-if="showClose"
        >
          <u-icon
            name="close"
            :size="30"
            color="#666"
          ></u-icon>
        </view>
        <view
          class="title"
          :style="{ textAlign: titleAlign }"
        >
          <text class="title--text">{{ title }}</text>
          <text class="title--count">{{ list.length }}</text>
        </view>
        <view class="u-icon--clear">
          <u-icon
            custom-prefix="ty-icon"
            name="qingkongliebiao"
            :size="54"
            color="#666"
            @click="changeClearList"
          ></u-icon>
        </view>
      </view>
      <!-- 滚动数据列表 -->
      <scroll-view
        scroll-y
        class="scroll-view"
      >
        <view
          class="none-song"
          v-if="list.length <= 0"
        >
          <u-empty
            :text="`暂无${typeTitle}歌曲~`"
            :mode="emptyMode"
          ></u-empty>
        </view>
        <view
          class="song-list"
          v-else
        >
          <view
            class="song-list--item u-border-bottom"
            v-for="(item, index) in list"
            :key="item.id"
            :class="{
              'song-list--item-play': item.id === playerInfo.id,
            }"
            @click="$emit('click', item)"
          >
            <view class="item-serial">{{ index + 1 }}</view>
            <view class="item-title">
              <view class="item-title--name u-line-1">{{ item.name }}</view>
              <view class="item-title--artist u-line-1">{{ item.artist }}</view>
            </view>
            <view class="item-icon">
              <u-icon
                custom-prefix="ty-icon"
                name="zhengzaibofangyinle"
                size="30"
                :color="theme"
                v-if="item.id === playerInfo.id && playerInfo.play"
              ></u-icon>
              <view
                v-else
                @click.stop
              >
                <u-icon
                  name="close"
                  :size="30"
                  color="#666"
                  @click="changeDelSong(item)"
                ></u-icon>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </u-popup>
</template>

<style lang="scss" scoped>
.scroll-wrap {
  position: relative;
  overflow: hidden;
  background-color: rgba($color: #ffffff, $alpha: 0.5);
  &:before {
    content: '';
    background-image: var(--cover-pic);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    filter: blur(50rpx);
    transform: scale(1.5);
    z-index: -1;
  }
  :deep(.u-cell-item-box) {
    background: none;
  }
}

.scroll-view {
  height: 600rpx;
}

.scroll-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  &:after {
    left: 0;
  }
}

.scroll-header__icon {
  padding-left: $ty-lg-padding;
}

.song-list {
  @include ty-flex-col;
  &--item {
    @include ty-flex-row;
    @include ty-col-center;
    padding: $ty-xlg-padding $ty-lg-padding;
    &:hover {
      opacity: 0.8;
    }
    &-play {
      .item-title--name {
        color: $u-type-primary !important;
      }
      .item-serial,
      .item-title--artist {
        color: $u-type-primary-disabled !important;
      }
    }
  }
  .item-serial {
    color: $u-content-color;
    font-size: 22rpx;
    margin-right: $ty-lg-padding;
  }
  .item-title {
    @include ty-flex-row;
    @include ty-col-center;
    max-width: 80%;
    flex: 1;
    &--name {
      color: $u-main-color;
      font-size: 28rpx;
      flex: 0 0 auto;
    }
    &--artist {
      color: $u-content-color;
      font-size: 18rpx;
      margin-left: $ty-md-padding;
    }
  }
  .item-icon {
    flex: 1 1 auto;
    @include ty-flex;
    @include ty-row-right;
  }
}

.title {
  text-align: center;
  padding: $ty-xlg-padding $ty-lg-padding;
  flex: 1 1 auto;
  &:after {
    left: 0;
  }
  &--text {
    font-size: 32rpx;
  }
  &--count {
    font-size: 24rpx;
    color: $u-content-color;
    margin-left: $ty-md-padding;
  }
}

.u-icon {
  &--close,
  &--clear {
    padding: 0 $ty-lg-padding;
    color: $u-main-color;
  }
}

.u-cell {
  padding: $ty-lg-padding;
}

.song-image {
  width: 50rpx;
  height: 50rpx;
}

.none-song {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: -50rpx;
  &--image {
    width: 640rpx;
    height: 480rpx;
  }
  &--text {
    font-size: 24rpx;
    color: $u-type-info-dark;
    margin-top: -50rpx;
  }
}
</style>
